<template>
    <view class="container">
        <view class="material_library_head_bg">
            <text class="material_library_head_title">素材库</text>
            <image style="width: 100%;height: 274rpx;" mode="aspectFit" src="https://image1.sansancloud.com/linwenlaoshi/2020_9/10/11/26/15_316.jpg"></image>
            <view class="search_top">
              <view class="search_input">
                <image @click.stop="getSearchProductName" class="search_input_icon" src="https://image1.sansancloud.com/linwenlaoshi/2020_9/8/10/19/7_751.jpg"></image>
                <view :disalbed='true' readonly ='readonly' style="text-align:left" class='search_input_text'  @tap="tolinkUrl('search_page.html')">
                    <text style="color: #999;">搜索产品/标签/分类</text>
                </view>
                <!-- <input class="search_input_text" :value="searchValue" confirm-type="search" data-link=""  @tap="tolinkUrl('search_page.html')" placeholder-class="phcolor" placeholder="搜索产品/标签/分类"></input> -->
              </view>
            </view>
        </view>
        <view class="product_type_list">
            <scroll-view scroll-x class="tab-h" :scroll-into-view="'tab_'+positionTab" scroll-with-animation='true'>
              <view  v-for="(item,index) in productTypeList" :key="index" @tap="bindTypeItem(index,'one')" :id="'tab_'+item.id" class='tab-item' :style="{color:positionTab==index?defaultColor:'',}">
                {{item.name}}
                <text class="active_border" :style="{borderBottom:'4rpx solid '+defaultColor}" v-if="positionTab==index"></text>
                <text class="vertical_line" v-if="index!=0"></text>
              </view>
            </scroll-view>
        </view>
        <view class="product_list" v-if="productData&&productData.length!=0">
            <scroll-view scroll-x class="tab-h" :scroll-into-view="'tab_'+proPositionTab" scroll-with-animation='true'>
              <view  v-for="(item,index) in productData" :key="index" @tap="bindTypeItem(index,'two')" :id="'tab_'+item.id" class='tab-pro-item' :style="{color:proPositionTab==index?defaultColor:'',}">
                <image class="product_item_img" mode="widthFix" :src="item.imagePath+'?x-oss-process=style/preview_120'"></image>
                <view class="product_item_text">
                    {{item.name}}
                    <text class="active_dot" :style="{background:defaultColor}" v-if="proPositionTab==index"></text>
                </view>
              </view>
            </scroll-view>
        </view>
        <view class="noproduct" v-else>
          <image mode="widthFix" src='https://image1.sansancloud.com/xianhua/2019_12/16/15/54/55_950.jpg?x-oss-process=style/preview_120'></image>
          <text>没有相关素材</text>
        </view>
        <view class="material_library_detail_type_list" :style="{background:secondColor}">
            <view class="material_library_detail_type_item" v-for="(item,index) in materialLibraryDetailTypeList" :key="index" @tap="bindLibraryTypeFun(index)" >
                <text class="material_library_detail_type_item_text" :style="{borderBottom:selectTabIndex==index?('4rpx solid '+defaultColor):'',color:selectTabIndex==index?defaultColor:'#939393'}">{{item.name}}</text>
                <!-- <text class="active_border" :style="{borderBottom:'4rpx solid '+defaultColor}" v-if="selectTabIndex==index"></text> -->
            </view>
        </view>
        <view class="material_library_list" v-if="productData&&productData.length!=0">
            <view class="material_library_item" v-for="(item,index) in materialLibraryTypeList" :key="id" @tap="tolinkUrl('material_library_detail.html?typeId='+item.id+'&productId='+productData[proPositionTab].id+'&typeName='+item.name+'&type='+selectTabIndex)">
                <image style="width: 120rpx;height: 120rpx;" :src="item.icon+'?x-oss-process=style/preview_120'"></image>
                <text class="material_library_item_text">{{item.name}}</text>
            </view>
        </view>
    <custom-page-index-component id="container" @refreshFun="getRefreshFun"></custom-page-index-component>
    </view>
</template>

<script>
import { socketFun } from "../../wxcomponents/public/json2Form";
export default {
  data() {
    return {
      productData:null,
      productTypeList:[],
      setting:null,
      positionTab:0,
      proPositionTab:0,
      selectTabIndex:0,
      listPage:{
          page: 1,
          pageSize: 40,
          totalSize: 0,
          categoryId: 0,
      },
      canRefresh:false,
      secondColor:'',
      defaultColor:'',
      materialLibraryTypeList:[],
      materialLibraryDetailTypeList:[
          {name:'海报',index:0},
          {name:'视频',index:1},
      ],
    };
  },
  props: {},

  /*onload*/
  onLoad: function (options) {
    let that=this;
    console.warn("======onLoad:options======", options, getApp().globalData.setting);
    that.getProductType();
  },
  onReady: function () {
    
  },
  onShow: function () {
    let that=this;
    getApp().globalData.addAuthorizationListenerItem(that)//授权头像
	that.setData({
        setting:getApp().globalData.setting,
        defaultColor:getApp().globalData.setting.platformSetting.defaultColor,
        secondColor:getApp().globalData.setting.platformSetting.secondColor,
       })
  },
  /* 分享 app.js862行*/
  onShareAppMessage: function () {
    console.log(getApp().globalData.miniIndexPage);
    return getApp().globalData.shareForFx2(getApp().globalData.miniIndexPage);
  },
  onPullDownRefresh: function () {
    let that = this; // 下拉刷新的时候首先判断存不存在tab
    console.log("下拉");
    // that.listPage.page=1
    // that.getData(that.listPage);
    wx.stopPullDownRefresh();
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    console.log('===onReachBottom====');
    let that = this
    // if (that.listPage.totalSize > that.listPage.page * that.listPage.pageSize) {
    //   that.listPage.page++
    //   that.getData(that.listPage,'upload');
    // }else{
    //     wx.showToast({
    //       title: "到底了~",
    //       image: '/wxcomponents/images/icons/tip.png',
    //       duration: 1000
    //     });
    // }
  },
  methods: {
    bindLibraryTypeFun:function(index,type){
        let that=this;
        console.log("==bindTypeItem==",index,type)
        that.selectTabIndex=that.materialLibraryDetailTypeList[index].index;
        // that.getMaterialLibraryDetail(that.listPage); 
        // that.listPage.categoryId=that.productTypeList[index].id;
        // that.getData(that.listPage,'upload');
    },
    getStateData: function (state) {
      let that = this;
      console.log("===getStateData===", state);
      that.selectComponent("#container").setPopupState(state);
    },
    getRefreshFun:function(){
        let that=this;
        // that.linkEvent(that.backUrl,'reLaunch');
    },
    //获取产品分类
    getProductType: function (categoryId) {
      let that = this;
      let customIndex = getApp().globalData.AddClientUrl("/wx_get_categories_only_by_parent.html", {
        categoryId: categoryId || 0
      });
      getApp().globalData.showToastLoading('loading', true);
      wx.request({
        url: customIndex.url,
        header: getApp().globalData.header,
        success: function (res) {
          wx.hideLoading();
          console.log("getProductType", res.data);
          let dataList=res.data.relateObj;
          let productTypeList=[];
          if (res.data.errcode == 0) {
              dataList=res.data.relateObj;
              if(dataList.length!=0){
                  for(let i=0;i<dataList.length;i++){
                      if(!dataList[i].adverLink||dataList[i].adverLink!='two'){
                          productTypeList.push(dataList[i])
                      }
                  }
              }
          }
          that.listPage.categoryId=productTypeList[0].id
          that.getData(that.listPage)
          that.setData({
            productTypeList: productTypeList
          });
          console.log("that.data.productTypeList", that.productTypeList,productTypeList);
          wx.hideLoading();
        },
        fail: function (res) {
          console.log("fail");
          wx.hideLoading();
          getApp().globalData.loadFail();
        }
      });
    },
    /* 获取数据 */
    getData: function (param) {
      let that = this;
      let customIndex = getApp().globalData.AddClientUrl("/more_product_list.html", param);
      getApp().globalData.showToastLoading('loading', true);
      wx.request({
        url: customIndex.url,
        header: getApp().globalData.header,
        success: function (res) {
          console.log(res.data);
          that.listPage.pageSize = res.data.pageSize;
          that.listPage.curPage = res.data.curPage;
          that.listPage.totalSize = res.data.totalSize;
          let dataArr = that.productData;
          if (param.page==1) {
            dataArr = res.data.result||[];
          }else{
            dataArr = dataArr.concat(res.data.result||[]);
          }
          that.setData({
            productData: dataArr
          });
          if(dataArr.length!=0){
              that.getAlbumMaterialTypesData(dataArr[0].id);
          }
          wx.hideLoading();
        },
        fail: function (res) {
          console.log("fail");
          wx.hideLoading();
          getApp().globalData.loadFail();
        },
        complete: function () {
          that.setData({
            canRefresh: true
          });
        }
      });
    },
    bindTypeItem:function(index,type){
        let that=this;
        if(type=='one'){
            that.positionTab=index;
            that.proPositionTab=0
            that.listPage.categoryId=that.productTypeList[index].id;
            that.getData(that.listPage,'upload');
        }else{
            that.proPositionTab=index;
            that.getAlbumMaterialTypesData(that.productData[index].id);
        }
    },
    getAlbumMaterialTypesData:function(productId){
        let that = this;
        let param={
            productId:productId||0
        }
        let customIndex = getApp().globalData.AddClientUrl("/wx_find_album_material_types.html", param);
        getApp().globalData.showToastLoading('loading', true);
        wx.request({
          url: customIndex.url,
          header: getApp().globalData.header,
          success: function (res) {
            console.log(res.data);
            let dataArr = res.data.relateObj.result
            that.setData({
              materialLibraryTypeList: dataArr
            });
            wx.hideLoading();
          },
          fail: function (res) {
            console.log("fail");
            wx.hideLoading();
            getApp().globalData.loadFail();
          },
          complete: function () {
            that.setData({
              canRefresh: true
            });
          }
        });
    },
    /* 组件事件集合 */
    tolinkUrl: function (e) {
      console.warn("=======e=======", e);
      let linkUrl = e.currentTarget?e.currentTarget.dataset.url:e;
      getApp().globalData.linkEvent(linkUrl);
    },
    setData: function (obj) {
      let that = this;
      let keys = [];
      let val, data;
      Object.keys(obj).forEach(function (key) {
        keys = key.split('.');
        val = obj[key];
        data = that.$data;
        keys.forEach(function (key2, index) {
          if (index + 1 == keys.length) {
            that.$set(data, key2, val);
          } else {
            if (!data[key2]) {
              that.$set(data, key2, {});
            }
          }

          data = data[key2];
        });
      });
    }
  }
};
</script>
<style>
@import "./index.css";
</style>